<template>
	<div class="AddDialog">
		<el-dialog :close-on-click-modal="closeOnClickModal" :title="title" v-model="visible" width="600px" @open="open" @closed="dialogClosed">
			<div class="form_wrap">
				<el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="80px">
					<el-form-item prop="name" label="名称">
						<el-input show-word-limit maxlength="200" v-model="ruleForm.name" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item prop="description" label="说明">
						<el-input show-word-limit maxlength="500" v-model="ruleForm.description" type="textarea" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item prop="type" label="类型">
						<el-select v-model="ruleForm.type" clearable>
							<el-option label="邮递条款" value="1"> </el-option>
							<el-option label="预售说明" value="2"> </el-option>
							<el-option label="售后保证" value="3"> </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="是否启用">
						<MySwitch v-model="ruleForm.status" />
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="visible = false">取 消</el-button>
					<el-button type="primary" @click="toSave">保 存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import dialog from '/@/mixins/dialog';
import { ElMessage } from 'element-plus';
export default {
	name: 'AddDialog',
	mixins: [dialog],
};
</script>
<script setup>
import { useProductApi } from '/@/api/product';
const { addSupport, editSupport } = useProductApi();
const props = defineProps({
	isAdd: Boolean,
	itemInfo: Object,
});
const emit = defineEmits(['update:modelValue', 'refresh']);
const title = computed(() => (props.isAdd ? '新增' : '修改') + '支持');
const ruleForm = ref({});
const rules = {
	name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
	description: [{ required: true, message: '请输入说明', trigger: 'blur' }],
	type: [{ required: true, message: '请选择类型', trigger: 'change' }],
};
const open = () => {
	if (!props.isAdd) {
		ruleForm.value = { ...props.itemInfo };
	}
};
const dialogClosed = () => {
	ruleForm.value = {};
	formRef.value.resetFields();
};
const formRef = ref();
const loading = ref(false);
const toSave = () => {
	formRef.value.validate(async (valid) => {
		if (valid) {
			loading.value = true;
			let res = props.isAdd ? await addSupport(ruleForm.value) : await editSupport(ruleForm.value);
			loading.value = false;
			if (res.code !== 200) return;
			emit('update:modelValue', false);
			ElMessage.success('保存成功！');
			emit('refresh');
		}
	});
};
</script>

<style lang="scss" scoped></style>
